﻿
<script src="-rootliburl-PrettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>

<div id="pictures_placeholder"></div>

<style type="text/css">
#pictures_placeholder a { float: left; color: #fff; font-size:1.2em; line-height:1.2em; position: relative; display: inline-block; margin: 0 3px 3px 0; }
#pictures_placeholder img { float:left; border: 0; }
#pictures_placeholder a > span { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: rgba(0,0,0,0.6); text-align: center; overflow:hidden; transition:all 0.3s ease; }
#pictures_placeholder a:hover > span { height: 100%; }
#pictures_placeholder a > span > span { position: absolute; left: 0px; top: 50%; height:1.2em; margin-top:-0.6em; width: 100%; text-align: center; }
</style>

<script type="text/JavaScript">
$(document).ready(function() {
    $('head').append('<link href="-rootliburl-PrettyPhoto/css/prettyPhoto.css" rel="stylesheet" type="text/css"/>');
    $.getJSON("-weburl-_vti_bin/ListData.svc/Pictures", function(data) {
        var count = 0;
        $.each(data.d.results, function(i,result) {
            var srcl = result.__metadata.media_src;
            var name = result.Name;
            var title = result.Title ? result.Title : "";
            var srcs = srcl.replace("/" + name, "/_t/" + name.replace(".", "_") + ".jpg");
            html = "<a href='" + srcl + "' rel='prettyPhoto[pp_gal]'><img src='" + srcs + "' alt='" + title + "'/><span><span>" + title + "</span></span></a>";
            $('#pictures_placeholder').append($(html));
        });
        $("a[rel^='prettyPhoto']").prettyPhoto({ deeplinking: false });
    });
});
</script>
